<template>
	<view>
		<a-layout :title="schoolName">
			<image class="logo-img" :src="user.headimgurl" mode=""></image>
			<y-form style="padding: 15px 30px;" radius="radius" v-model="info" :keys="keys" submitText="登录" @submit="login" />
		</a-layout>
	</view>
</template>

<script>
	import yForm from '@/y-ui/y-form/y-form.vue';

	export default {
		components: {
			yForm
		},
		onLoad() {
			//获取验证码
			this.getCode();
			//获取学校信息
			this.findCampus();
		},
		data() {
			return {
				showPassword: false,
				schoolName: "",
				codeImg: '',
				info: {
					telephone: process.env.NODE_ENV === 'development' ? 18285154655 : '',
					password: process.env.NODE_ENV === 'development' ? 18285154655 : ''
				},
			};
		},
		computed: {
			user() {
				return {
					...this.$store.state.wxInfo,
					...(this.$store.state.userInfo || {})
				};
			},
			subValue() {
				return {
					...this.info,
					openId: this.user.openid
				}
			},
			keys() {
				return [{
					key: "telephone",
					lable: "手机号：",
					type: "number",
					placeholder: "请输入手机号",
					rules: {
						rule: ['required', "isMobile"],
						msg: ['请输入手机号', "输入正确手机号"]
					}
				}, {
					key: "password",
					lable: "密码：",
					type: "password",
					placeholder: "请输入密码",
					rules: {
						rule: ["required"],
						msg: ["请输入密码"]
					}
				}, {
					key: "valCode",
					lable: "验证码：",
					type: "number",
					placeholder: "请输入验证码",
					rules: {
						rule: ["required"],
						msg: ["请输入验证码"]
					},
					form_render: (h) => {
						return h('img', {
							attrs: {
								src: this.codeImg
							},
							style: {
								height: "25px",
								width: "auto",
								marginLeft: ".5em"
							},
							on: {
								click: this.getCode
							}
						})
					}
				}]
			}
		},
		methods: {
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			//获取验证码
			getCode() {
				this.$http.get('getPicCode').then(res => {
					this.codeImg = 'data:image/png;base64,' + res;
				});
			},
			findCampus() {
				this.$store.state.schoolId && this.$http.get('api/v1/campus/findCampus', {
					id: this.$store.state.schoolId
				}).then(res => {
					this.schoolName = res.name;
				});
			},
			async login(e) {
				if (!e) return;
				this.$http.login(this.subValue).then(res => {
					this.$store.commit('LOGIN', {
						token:res.result[0]
					});
					this.$store.commit('TOKENS',res.result);
					uni.showToast({
						title:"登录成功",
						duration:800
					})
					setTimeout(r=>{
						uni.reLaunch({
							url: '/pages/index/index'
						});
					},800);
				}).finally(this.$loading({
					msg: '登陆中'
				}));
			}
		}
	};
</script>

<style>
	page {
		background-color: #f9f9f9;
	}

	.logo-img {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		display: block;
		transform: translateY(-10%);
	}
</style>
